<!--
* @fileName test.vue
* @author caoke
* @date 2022/10/12 09:54:43
* @version V1.0.0
* @description 
!-->
<template>
  <div>
    <content-card title="table屏幕宽度 全固定列=列宽+剩余平分" type="line" :cardPadding="true">
      <a-table :columns="columns1" :data-source="data" bordered></a-table>
    </content-card>
    <content-card title="table屏幕宽度 部分固定列+部分自适应" type="line" :cardPadding="true">
      <a-table :columns="columns" :data-source="data" bordered></a-table>
    </content-card>
    <content-card title="table固定1200:部分固定列+部分自适应" type="line" :cardPadding="true">
      <a-table :columns="columns" :data-source="data" bordered :scroll="{ x: 1300 }"></a-table>
    </content-card>
    <content-card title="table自适应 内容自适应" type="line" :cardPadding="true">
      <a-table :columns="columns" :data-source="data" bordered :scroll="{ x: true }">
        <div slot="address" slot-scope="text">{{text}}</div>
        <!-- <j-ellipsis slot="address" slot-scope="text" :value="text" /> -->
      </a-table>
    </content-card>
    <content-card title="table自适应 内容自适应+限制宽度" type="line" :cardPadding="true">
      <a-table :columns="columns" :data-source="data" bordered :scroll="{ x: true }">
        <j-ellipsis slot="address" slot-scope="text" :value="text" />
        <!-- <j-ellipsis slot="address" slot-scope="text" :value="text" />
        <j-ellipsis slot="address" slot-scope="text" :value="text" /> -->
      </a-table>
    </content-card>
  </div>
</template>

<script>
import ContentCard from "../../components/base/content-card/content-card.vue";
import JEllipsis from "../../components/base/JEllipsis/JEllipsis.vue";
const columns = [
  {
    title: "Address",
    dataIndex: "address",
    key: "address 1",
    // ellipsis: true,
    align: "center",
    width: 400,
    fixed: "left",
    scopedSlots: { customRender: "address" },
  },
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
    // width: 180,
    align: "center",
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age",
    // width: 120,
    align: "center",
  },

  {
    title: "Long Column Long Column Long Column",
    dataIndex: "address",
    key: "address 2",
    align: "center",
    // ellipsis: true,
    // width: 120,
    scopedSlots: { customRender: "address" },
  },
  {
    title: "Long Column Long Column",
    dataIndex: "address",
    align: "center",
    key: "address 3",
    ellipsis: true,
    scopedSlots: { customRender: "address" },
  },
  {
    title: "Long Column",
    dataIndex: "address",
    align: "center",
    key: "address 4",
    ellipsis: true,
    scopedSlots: { customRender: "address" },
  },
];
const columns1 = [
  {
    title: "Address",
    dataIndex: "address",
    key: "address 1",
    ellipsis: true,
    align: "center",

    scopedSlots: { customRender: "address" },
  },
  {
    title: "Name",
    dataIndex: "name",
    key: "name",

    align: "center",
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age",

    align: "center",
  },

  {
    title: "Long Column Long Column Long Column",
    dataIndex: "address",
    key: "address 2",
    ellipsis: true,
    align: "center",

    scopedSlots: { customRender: "address" },
  },
  {
    title: "Long Column Long Column",
    dataIndex: "address",
    key: "address 3",
    align: "center",

    ellipsis: true,
    scopedSlots: { customRender: "address" },
  },
  {
    title: "Long Column",
    dataIndex: "address",
    key: "address 4",
    align: "center",

    ellipsis: true,
    scopedSlots: { customRender: "address" },
  },
];
const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
    address:
      "朗德万斯照明有限公司朗德万斯照明有限公司朗德万斯照明有限公司朗德万斯照明有限公司朗德万斯照明有限公司朗德万斯照明有限公司朗德万斯照明有限公司朗德万斯照明有限公司",
    tags: ["nice", "developer"],
  },
  {
    key: "2",
    name: "Jim Green",
    age: 42,
    address: "London No. 2 Lake Park, London No. 2 Lake Park",
    tags: ["loser"],
  },
  {
    key: "3",
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park, Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"],
  },
];
export default {
  name: "",
  components: { ContentCard, JEllipsis },
  data() {
    return {
      loading: false,
      pagination: {},
      data: [],
      columns,
      columns1,
      validatorRules: {
        name: [{ required: true, message: "请选择机构", trigger: "change" }],
      },
    };
  },
  created() {
    this.data = data;
  },
  methods: {},
};
</script>
<style lang='scss' scoped>
.address {
  max-width: 200px;
  overflow: hidden;
}
</style>